<template>
  <div class="footer">
      <div v-for="(span,index) in spans" :key="index" class="box">
          <div class="span">{{span.type}}</div>
          <div class="li">
              <li v-for="(li,index) in span.lis" :key="index">{{li}}</li>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      spans: [
        {
          type: "购物指南",
          lis: ["免息分期", "以旧换新", "众测活动", "企业购", "O2O采购"],
        },
        {
          type: "售后服务",
          lis: [
            "门店维修",
            "保修政策",
            "防伪查询",
            "退换货政策",
            "手机寄修服务",
          ],
        },
        {
          type: "维修与技术支持",
          lis: ["服务店", "预约维修", "手机寄修", "备件价格查询", "上门服务"],
        },
        {
          type: "特色服务",
          lis: ["防伪查询", "补购保障", "以旧换新", "礼品包装",""],
        },
        {
          type: "关于我们",
          lis: ["公司介绍", "华为零售店", "商家中心", "意见反馈",""],
        },
        {
          type: "友情链接",
          lis: [
            "华为集团",
            "花粉俱乐部",
            "华为云",
            "华为应用市场",
            "华为CBG官网",
          ],
        },
      ],
    };
  },
};
</script>

<style>
.footer{
    width: 80%;
    height:300px;
    margin: 0 auto;
    padding-top: 100px;
}
.box{
    display:inline-table;
    width: 180px;
    height: 250px;
    margin-right: 10px;
}
.span{
    font-weight: bold;
    width: 180px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}
.li li{
  list-style: none;
  display: block;
  width: 180px;
  height: 30px;
  margin-top: 10px;
}
</style>